<template>
  <div class="weather-container">
    <el-card class="box-card">
      <!-- header部分 -->
      <template #header>
        <div class="card-header">
          <TopComponment :plusHandler="plusHandler">
            <template #add>
              <label for="plus" @click="plusHandler" v-show="isDisabled">
                <el-icon>
                  <Plus />
                </el-icon>
              </label>
              <el-button plain id="plus"></el-button>
            </template>
          </TopComponment>
        </div>
      </template>
      <BodyComponent>
        <template #weatherInfo1>
          <div class="weather-info1">
            <h3>您正在预览{{ WeatherInfoCurrent.city }}的天气信息</h3>
          </div>
        </template>
        <template #weatherInfo2>
          <div class="weather-info2">
            <div>
              <p>{{ `当日气温是:  ${WeatherInfoCurrent.temperature}摄氏度` }}</p>
              <p>{{ `当日天气是:  ${WeatherInfoCurrent.weather}` }}</p>
              <p>{{ `当日风向是:  ${WeatherInfoCurrent.winddirection}风` }}</p>
              <p>{{ `当日风力是:  ${WeatherInfoCurrent.windpower}级` }}</p>
            </div>
          </div>
        </template>
      </BodyComponent>
      <template #footer>
        <FooterComponent> </FooterComponent>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import TopComponment from "../views/TopComponment.vue"
import BodyComponent from "../views/BodyComponent.vue"
import FooterComponent from "../views/FooterComponent.vue"
import { useWeatherStore } from "../stores/Weather"
import { storeToRefs } from "pinia"

const { cityName, WeatherInfos, isDisabled,WeatherInfoCurrent } = storeToRefs(useWeatherStore())

const { plusHandler } = useWeatherStore()
</script>

<style lang="scss" scoped>
.weather-container {
  background-color: rgb(0, 102, 138);
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-card__header) {
  display: flex;
  background-color: rgb(0, 102, 138);
  width: 100vw;
  font-size: 18px;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

:deep(.el-card__footer) {
  border: none;
}

.box-card {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 102, 138);

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
}

#plus {
  display: none;
}

label {
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &:hover {
    color: rgb(0, 78, 113);
  }
}

.weather-info1 {
  background-color: rgb(0, 78, 113);
  color: white;
  font-size: large;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  letter-spacing:2px;
}

.weather-info2 {
  color: white;
  font-size: large;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing:2px;
}
</style>
